<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生信息查询系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        body {
            font-family: 'Microsoft Yahei', Arial, sans-serif;
            margin: 0;
            background-color: #f5f7fa;
        }

        /* 登录界面样式 */
        .login-container {
            width: 300px;
            margin: 100px auto;
            padding: 40px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
        }

        .login-input {
            width: 100%;
            padding: 12px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
            outline: none;
        }

        .login-input:focus,.search-input:focus {
            border: 1px solid #409eff;
            outline: none;
            /* outline: 2px solid #409eff; */
        }

        .login-btn {
            width: 100%;
            padding: 12px;
            background: #409eff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        /* 查询界面样式 */
        .query-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            display: none; /* 默认隐藏 */
        }

        .search-box {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .search-input {
            flex: 1;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .search-btn {
            padding: 12px 30px;
            background: #409eff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        th {
            background: #f8f9fa;
        }
    </style>
</head>
<body>
    <!-- 登录界面 -->
    <div class="login-container">
        <h2>学生信息查询系统</h2>
        <input type="password" id="password" class="login-input" placeholder="请输入密码">
        <button class="login-btn" onclick="checkPassword()">登录</button>
    </div>

    <!-- 查询界面 -->
    <div class="query-container">
        <div class="search-box">
            <input type="text" id="searchInput" class="search-input" placeholder="输入姓名或学号">
            <button class="search-btn" onclick="searchStudents()">查询</button>
        </div>
        <table id="studentTable">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>专业</th>
                    <th>GPA</th>
                </tr>
            </thead>
            <tbody id="studentList"></tbody>
        </table>
    </div>

<script>
// 模拟生成100条学生数据
function generateStudents() {
    const majors = ['计算机科学', '软件工程', '人工智能', '数据科学', '网络安全'];
    const surnames = ['王','李','张','刘','陈','杨','黄','赵','周','吴'];
    const givenNames = ['浩','子轩','俊杰','宇航','博文','雨婷','欣怡','若曦','诗涵','雅静'];
    
    let students = [];
    for(let i=1; i<=100; i++) {
        let student = {
            id: `2023${i.toString().padStart(4,'0')}`, // 学号规则：2023+4位序号
            name: surnames[Math.floor(Math.random()*surnames.length)] + 
                  givenNames[Math.floor(Math.random()*givenNames.length)],
            gender: Math.random() > 0.5 ? '男' : '女',
            age: Math.floor(Math.random()*4 + 18), // 18-21岁
            major: majors[Math.floor(Math.random()*majors.length)],
            gpa: (Math.random()*2 + 2).toFixed(2) // 2.00-4.00
        };
        students.push(student);
    }
    return students;
}

let allStudents = generateStudents();

// 密码验证
function checkPassword() {
    const password = document.getElementById('password').value;
    if(password === '123456') {
        document.querySelector('.login-container').style.display = 'none';
        document.querySelector('.query-container').style.display = 'block';
        updateStudentList(allStudents); // 显示全部学生
    } else {
        alert('密码错误，请重新输入！');
    }
}

// 查询功能
function searchStudents() {
    const keyword = document.getElementById('searchInput').value.toLowerCase();
    const filtered = allStudents.filter(s => 
        s.id.includes(keyword) || 
        s.name.toLowerCase().includes(keyword)
    );
    updateStudentList(filtered);
}

// 更新学生列表
function updateStudentList(students) {
    const tbody = document.getElementById('studentList');
    tbody.innerHTML = '';
    
    students.forEach(s => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${s.id}</td>
            <td>${s.name}</td>
            <td>${s.gender}</td>
            <td>${s.age}</td>
            <td>${s.major}</td>
            <td>${s.gpa}</td>
        `;
        tbody.appendChild(row);
    });
}
</script>
</body>
</html>
<style>
/* 我自己定义的样式 20240622 */
/* 滚动条样式 */
::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 3px;
    box-shadow   : inset 0 0 3px rgba(0, 0, 0, 0.2);
    background   : #c4d0dd;
}
::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 3px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    background   : #ededed;
}
</style>